<template>
	<div style="height:100%;width:700%;display: inline;background-color: aqua;">
	<div class="form-container">
	    <div class="image-container">
	        <el-upload
	            class="upload-demo"
	            drag
	            :auto-upload="false"
	            list-type="picture"
	            :show-file-list="true"
	            :file-list="fileList"
	            :limit="1"
	            @change="onChangeFile"
	            ref="uploadRef"
	        >
			
	            <h3>新上传的图片</h3>
	            <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
	            <div class="el-upload__text">
	                拖入或者 <em>点击上传</em>
	            </div>
	        </el-upload>
	    </div>
	    <el-form :model="data.user" :rules="rules" ref="formRef" label-width="120px">
	        <el-form-item label="用户姓名" prop="uname">
	            <el-input v-model="data.user.uname"></el-input>
	        </el-form-item>
	        <el-form-item label="用户手机号"  prop="phone">
	            <el-input v-model="data.user.phone" type="number" placeholder="0"></el-input>
	        </el-form-item>
			<el-form-item label="用户密码"  prop="phone">
			    <el-input v-model="data.user.pwd" type="password" placeholder="0"></el-input>
			</el-form-item>
	        <el-form-item label="用户性别" prop="sex">
			<el-radio-group v-model="data.user.sex">
			        <el-radio value="1">男生</el-radio>
			        <el-radio value="0">女生</el-radio>
			 </el-radio-group>
			</el-form-item>
	        <el-form-item label="用户地址" prop="addr">
	            <el-input
	                v-model="data.user.addr"
	                style="width: 240px"
	                :rows="2"
	                type="textarea"
	                placeholder="请输入地址精致到门牌号"
	            />
	        </el-form-item>
			<el-form-item>
			<el-button type="primary" @click="add()">添加</el-button>
			</el-form-item>
	    </el-form>
	</div>	
	
		
	</div>
</template>
<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue'
	import { $get, $postf,$postj,$postx } from "../../../ajax/index.js"
	import myalert from "../../../utils/myalert.js"
	import store from "../../../store/index.js"
	import router from "../../../router/index.js"
	import { useRoute, useRouter } from 'vue-router'
	import { Plus } from '@element-plus/icons-vue'
	import type { UploadProps } from 'element-plus'
	import type { ComponentSize, FormInstance, FormRules,ElMessage } from 'element-plus'
	const imgUrl=ref('');
	const fileList=ref([]);
	const formData = new FormData();
	const data = reactive({
	    user: { uid: 0, uname: '' },//注册的信息
		pic:null,//添加的头像
		
	})
	const route = useRoute()
	onMounted(()=>{
		if(route.query.uid!=null){console.log(route.query.uid)
		$get("/api/adm/seller/findByuid/"+route.query.uid)
		.then((resp)=>{
			console.log(resp.data.data)
			data.user=resp.data.data;
		})}
		
	})
	
	//图片上传
		function onChangeFile(file, fileList){
			console.log("file=" + file.value)
			console.log("fileList=" + fileList)
			if (fileList.length > 0) {
				//fileList[0].raw; 文件内容
				imgUrl.value = URL.createObjectURL(fileList[0].raw)
	
				data.pic=fileList[0].raw;
				console.log(data.pic);
			}
		}
	
	function add(){
		console.log(data.user);
		console.log(imgUrl.value);
		formData.append("uid", data.user.uid)
		formData.append("uname",data.user.uname)
		formData.append("phone", data.user.phone)
		formData.append("pwd",data.user.pwd)
		formData.append("sex", data.user.sex)
		formData.append("addr",data.user.addr)
		formData.append("pic",data.user.pic)
		formData.append('pid',data.pic)
		
		$postf("/api/adm/seller/add",formData)
		.then(()=>{
		router.push("/adm/sller");
		ElMessage({
			message: "注册成功!!!",
			type: 'success',
		})
		})
	}
</script>

<style scoped>
	.form-container {
	    position: absolute;
	    top: 20%;
	    right: 25%;
	}
	
	.image-container {
	    width: 25vw;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
		
	}
</style>
